import { defineComponent, ref, computed } from 'vue';
import { router } from '../../router/index';
import Styles from './planList.module.scss';
import MyList from '../classList/list';
import { usePlanList } from '@/domain/correction/hooks/planList';
import { StuPlan } from '@/domain/correction/types/jobs/planList';
export default defineComponent({
  name: 'PlanList',
  setup() {
    const store = usePlanList();
    const s = ref(0);
    const btnClick = (item: StuPlan) => {
      let class_id: any = router.currentRoute.value.query.class_id;
      let course_id: any = router.currentRoute.value.query.course_id;
      window.localStorage.setItem('course_id', course_id);
      router.push({ path: '/homeWork', query: { plan_id: item.id, class_id: class_id, work_id: item.work_id }, replace: false });
    };
    const getList = () => {
      store.toGetPlanlist();
    };
    const clearList = () => {
      store.toClearlist();
    };
    const changeStatus = (status: 0 | 1) => {
      s.value = status;
    };
    const list = computed(() => {
      if (s.value === 0) {
        return store.state.waitCorrecList;
      } else {
        return store.state.list;
      }
    });
    return () => (
      <div class={Styles['plan-box']}>
        <div class={'text-2-5xl h-r4.2 bg-white text-center ' + Styles['plan-list']} style="line-height: 4.2rem;">
          作业批改状态
        </div>
        <div class={Styles['list-box']}>
          <MyList
            loading={store.state.loading}
            finished={store.state.finished}
            refreshing={store.state.refreshing}
            getList={getList}
            list={list.value}
            btnClick={btnClick}
            clearList={clearList}
            changeStatus={changeStatus}
            statusName={[`待批改讲次（${store.state.correctNum > 99 ? '99+' : store.state.correctNum}份）`, '全部讲次']}
            btnName="进入批改"
          ></MyList>
        </div>
      </div>
    );
  }
});
